<template>
	<view class="class">
		<view class="date_select">
			<lxCalendar @change="change"></lxCalendar>
		</view>
		<u-divider text="课程安排"></u-divider>

		<view class="class_list">
			<view class="class_list_item">
				<view class="title">理论课</view>
				<view class="site">
					<text class="item">地点：</text>
					<!-- <u-icon name="map"></u-icon> -->
					<text>甘肃武威凉州区</text>
				</view>
				<view class="startTime">
					<text class="item">开始时间：</text>
					<!-- <u-icon name="clock"></u-icon> -->
					<text>2024-12-22 09:00</text>
				</view>
				<view class="endTime">
					<text class="item">结束时间：</text>
					<!-- <u-icon name="clock"></u-icon> -->
					<text>2024-12-22 15:00</text>
				</view>
				<view class="num">
					<text class="item">可预约人数：</text>
					<text>10人</text>
				</view>
				<view class="state">
					<text class="item">状态：</text>
					<text class="style">可预约</text>
				</view>

				<!-- 预约 -->
				<view class="subscribe_button">
					<u-button text="预约" size="normal" type="primary" @click="onSubscribe"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import lxCalendar from '../../../components/lx-calendar/lx-calendar.vue'
export default {
	components: {
		lxCalendar,
	},
	data() {
		return {

		}
	},
	methods: {
		change(e) {
			console.log(e);
		},
		onSubscribe() {
			
		}
	}
}
</script>

<style lang="scss" scoped>
.class {
	.add_button {
		margin: 32rpx;
		width: 200rpx;
	}

	.class_list {
		margin: 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.class_list_item {
			width: 100%;
			background: #f5f5f5;
			border-radius: 15rpx;
			padding: 20rpx;

			.title {
				font-size: $uni-font-size-medium;
				font-weight: bold;
				margin-bottom: 25rpx;
			}

			.site,
			.startTime,
			.endTime,
			.num,
			.state {
				display: flex;
				font-size: $uni-font-size-small;
				margin-bottom: 10rpx;

				.item {
					width: 180rpx;
				}

				text {
					margin-left: 10rpx;
					color: $uni-color-type1;
				}

				.style {
					color: #333;
					font-weight: bold;
				}
			}
			.subscribe_button {
				margin-top: 50rpx;
			}
		}
	}
}</style>
